@import "variables";
@import "./mixins/media";

.container,
.container-normal {
  width: 100%;
  padding-left: $grid-margin;
  padding-right: $grid-margin;
  margin-left: auto;
  margin-right: auto;
}

@each $name, $size in $grid-breakpoints {
  .container #{$name} {
    max-width: $size;
  }
  .container-normal #{$name} {
    max-width: $size;
  }
  @include media-up($size) {
    .container {
      max-width: map_get($container-max-widths, $name);
    }
  }
}

$grid-breakpoints-normal: (
        xs: 0,
        sm: 667px,
        md: 992px,
        lg: 1200px,
        xl: 1440px
);

$container-max-widths-normal: (
        sm: 618px,
        md: 960px,
        lg: 1080px,
        xl: 1200px
);

@each $name, $size in $grid-breakpoints-normal {
  .container-normal #{$name} {
    max-width: $size;
  }
  @include media-up($size) {
    .container-normal {
      max-width: map_get($container-max-widths-normal, $name);
    }
  }
}
